<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>忘记密码</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="${ctxStatic }/wx/mui/css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="${ctxStatic }/wx/css/load_register.css" />
		<script type="text/javascript" src="${ctxStatic }/zepto/zepto.min.js" ></script>
	</head>
       <style>
       	 html,body{
       	 	width: 100%;
       	 	height: 100%;
       	 	background: #F5F5F5;
       	 }
        label{
        	font-size: 14px;
        }
        .mui-input-group{
        	background: none;
        }
        .mui-input-row{
        	background: #fff;
        }
        .mui-input-group:after{
        	background:none;
        }
       </style>
	<body>
		<div id="forgot_password">
			<header class="mui-bar mui-bar-nav" style="background: #16C59B;">
			    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #fff;"></a>
			    <h1 class="mui-title" style="color: #fff;">忘记密码</h1>
			</header>
			 <div class="mui-content">
			 	  <div class="forget_box">
			 	  	 <form class="mui-input-group" action="${ctxWx}/pu/forgetPwd" method="post" id="registerForm">
			 	  	     <div class="mui-input-row">
			 	  	         <label>手机号码</label>
			 	  	         <input type="text" class="mui-input-clear" placeholder="请输入手机号码" name="mobile">
			 	  	     </div>
			 	  	     <div class="mui-input-row">
			 	  	         <label>密码</label>
			 	  	         <input type="password" class="mui-input-clear" placeholder="请输入密码" name="password1" id="password1">
			 	  	     </div>
			 	  	     <div class="mui-input-row">
			 	  	         <label>确认密码</label>
			 	  	         <input type="password" class="mui-input-clear" placeholder="请确认密码" name="password2" id="password2">
			 	  	     </div>
			 	  	     <div class="mui-input-row">
			 	  	         <label>验证码</label>
			 	  	         <input type="text" class="mui-input-clear" placeholder="请输入验证码" name="validateCode" id="validateCode"
			 	  	         	style="width: 30%;float: left;">
			 	  	         <button type="button" class="forgot_time" id="btn" onclick="settime(this)">获取验证码</button>
			 	  	     </div>
			 	  	     <div class="forget_p_btn">
			 	  	     	 <input type="button" value="重置密码" id="subBtn"/>
			 	  	     </div>
			 	  	 </form>
			 	  </div>
			 </div>
		</div>
		<script src="${ctxStatic }/mui/js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init();
			var countdown = 120;
			function settime(obj) {
				if (countdown == 0) {
					obj.removeAttribute("disabled");
					obj.innerHTML = "获取验证码";
					countdown = 120;
					return;
				} else {
					obj.setAttribute("disabled", true);
					obj.innerHTML = "重发(" + countdown + ")";
					countdown--;
				}
				setTimeout(function() {
					settime(obj)
				}, 1000)
			}
			Zepto(function() {
				 $("#btn").attr("disabled", true);
				 $("#subBtn").attr("disabled", true); 
				 $("#password1").click(function(){
						$("#password2").val("");
				 })
				 var keyVal2 = "${sessionScope.mes}";
				if(keyVal2.length!=0){  
					if(keyVal2=='密码修改成功,请重新登录'){
						mui.alert('密码修改成功,请重新登录',function(){
							window.location.href = '${pageContext.request.contextPath }/wxlogin.jsp';
s						})
					}else{
						mui.alert(keyVal2);
					}
				};
				document.getElementById('subBtn').addEventListener('tap', function(){
					$('#registerForm').submit();
				});
			$("input[name='mobile']").blur(function(){
			//获取输入的值
			var $value=$(this).val();
			if($value.length!=0){  
				$.post("${ctxFront}/sms/checkTel", {"mobile":$value},function(d){
					if(d==1){
						mui.alert('手机号码未注册,无法重置密码');
					}else if(d==0){
						$("input[name='password2']").blur(function(){
							//获取输入的值
							var $password1=$("#password1").val();
							var $password2=$("#password2").val();
							if($password1.length!=0 && $password2.length!=0){
								$.post("${ctxFront}/sms/checkPassword",{"password1":$password1,"password2":$password2},function(d){
									if(d==0){
										mui.alert('两次输入的密码不一致');
									}else if(d==1){
										mui.alert('6-16位数字和字母的组合');
									}else if(d==2){
										$('#btn').removeAttr('disabled');
										$("#btn").click(function(){
											$.post('${ctxFront}/sms/send', {"phone":$value,"type":2},function(data) {
												if (data != 'success') {
													mui.alert(data);
												} 
											});
											$('#subBtn').removeAttr('disabled')
										});
									}
								});
							}
						});
					}else if(d==2){
						mui.alert('手机号码格式不正确');
					}
				});
			}
		});	
			})
		</script>
		<%session.removeAttribute("mes");%>
	</body>

</html>